<script setup lang="ts">
  import { ref } from 'vue'
  import { User, ChatDotRound } from '@element-plus/icons-vue'
  import { useAccount } from '@/view/personalCenter/hook/account'
  const { 
    activeTab,
    showPhoneDialog, 
    showPasswordDialog, 
    userInfo, 
    phoneForm, 
    passwordForm, 
    handleAvatarUpload, 
    sendVerificationCode, 
    bindPhone, 
    bindWechat, 
    unbindWechat, 
    updatePassword, 
    printfRes 
  } = useAccount()
  const isClan = ref<boolean>(false)
  const isConcil = ref<boolean>(false)
</script>

<template>
  <div class="personal-center">
    <div class="header">
      <h1>设置</h1>
      <el-button @click="printfRes">测试res</el-button>
    </div>
    
    <el-tabs v-model="activeTab" class="main-tabs">
      <el-tab-pane label="账户信息" name="account">
        <div class="account-section">
          <div class="section-header">
            <h2>{{ userInfo.nickname }}</h2>
            <span class="subtitle">理事会认证</span>
            <el-button type="primary" size="small" class="edit-btn">编辑用户名</el-button>
          </div>
          <p class="description">请添加您的真实姓名</p>

          <!-- 头像上传 -->
          <div class="form-item">
            <label class="form-label">头像</label>
            <div class="avatar-upload">
              <el-avatar :size="60" :src="userInfo.avatar" class="avatar">
                <el-icon><User /></el-icon>
              </el-avatar>
              <div class="upload-info">
                <p>支持 2M 以内的 JPG 或 PNG 图片</p>
                <el-button size="small" @click="handleAvatarUpload">修改头像</el-button>
              </div>
            </div>
          </div>

          <!-- 家族角色 -->
          <div class="form-item">
            <label class="form-label">家族角色</label>
            <div class="form-content">
              <span class="current-value">{{ userInfo.familyRole }}</span>
            </div>
          </div>

          <div class="form-item">
            <label class="form-label">理事会角色</label>
            <div class="form-content">
              <span class="current-value">{{ userInfo.concilRole }}</span>
            </div>
          </div>
          <!-- 手机号 -->
          <div class="form-item">
            <label class="form-label">手机号</label>
            <div class="form-content">
              <span class="description">绑定手机后，可以加入更多家族的登录</span>
              <el-button size="small" @click="showPhoneDialog = true">添加手机号</el-button>
            </div>
          </div>

          <!-- 微信绑定 -->
          <div class="form-item">
            <label class="form-label">微信</label>
            <div class="form-content">
              <div class="wechat-info" v-if="userInfo.wechatBound">
                <el-icon class="wechat-icon" color="#07C160"><ChatDotRound /></el-icon>
                <span>已绑定微信</span>
                <el-button size="small" @click="unbindWechat">解除绑定</el-button>
              </div>
              <div class="wechat-info" v-else>
                <el-icon class="wechat-icon" color="#07C160"><ChatDotRound /></el-icon>
                <span>未绑定微信，绑定微信后可以使用微信登录</span>
                <el-button size="small" @click="bindWechat">绑定微信</el-button>
              </div>
            </div>
          </div>

          <!-- 密码 -->
          <div class="form-item">
            <label class="form-label">密码</label>
            <div class="form-content">
              <span class="description">设置唯一一个的密码保护你的账户</span>
              <el-button size="small" @click="showPasswordDialog = true">设置密码</el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="我加入的家族" name="family">
         <!-- 如果没加入家族  -->
        <div class="family-section" v-if="isClan">
          <el-empty description="暂无加入的家族" />
        </div>

        <div class="form-item" v-else>
          <label class="form-label">家族名称</label>
          <div class="form-content">
            <span class="current-value">{{ userInfo.clanName }}</span>
            <div>
              <el-button size="small" type="danger">浏览家族</el-button>
              <el-button size="small" type="danger">退出家族</el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="我加入的理事会" name="council">
        <div class="council-section" v-if="isConcil">
          <el-empty description="暂无加入的理事会" />
        </div>
        <div class="form-item" v-else>
          <label class="form-label">理事会名称</label>
          <div class="form-content">
            <span class="current-value">{{ userInfo.concilName }}</span>
            <div>
              <el-button size="small" type="danger">浏览理事会</el-button>
              <el-button size="small" type="danger">退出理事会</el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 手机号绑定对话框 -->
    <el-dialog v-model="showPhoneDialog" title="绑定手机号" width="400px">
      <el-form :model="phoneForm" label-width="80px">
        <el-form-item label="手机号">
          <el-input v-model="phoneForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="验证码">
          <div class="verification-input">
            <el-input v-model="phoneForm.code" placeholder="请输入验证码" />
            <el-button @click="sendVerificationCode">发送验证码</el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showPhoneDialog = false">取消</el-button>
        <el-button type="primary" @click="bindPhone">确定</el-button>
      </template>
    </el-dialog>

    <!-- 密码设置对话框 -->
    <el-dialog v-model="showPasswordDialog" title="设置密码" width="400px">
      <el-form :model="passwordForm" label-width="80px">
        <el-form-item label="新密码">
          <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请确认密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showPasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="updatePassword">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.personal-center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #fefefe;
  min-height: 100vh;

  .header {
    margin-bottom: 20px;
    
    h1 {
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
  }

  .main-tabs {
    .account-section {
      max-width: 800px;
      
      .section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
        
        h2 {
          font-size: 18px;
          font-weight: 600;
          color: #333;
          margin: 0;
        }
        
        .subtitle {
          color: #999;
          font-size: 14px;
        }
        
        .edit-btn {
          margin-left: auto;
        }
      }
      
      .description {
        color: #666;
        font-size: 14px;
        margin-bottom: 24px;
      }
      
    }
    
    .family-section,
    .council-section,
    .content-section,
    .subscription-section {
      padding: 40px 0;
      text-align: center;
    }
  }
  
  .verification-input {
    display: flex;
    gap: 12px;
    
    .el-input {
      flex: 1;
    }
  }
}

:deep(.el-tabs__header) {
  margin-bottom: 0;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
  background-color: #e4e7ed;
}

:deep(.el-tabs__item) {
  padding: 0 20px;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  
  &.is-active {
    color: #88a68e;
  }
}

:deep(.el-tabs__content) {
  padding-top: 20px;
}

//公共部分
  .form-item {
        display: flex;
        align-items: flex-start;
        padding: 20px 0;
        border-bottom: 1px solid #f0f0f0;
        
        .form-label {
          width: 120px;
          font-weight: 500;
          color: #333;
          flex-shrink: 0;
        }
        
        .form-content {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          
          .current-value {
            color: #333;
          }
          
          .description {
            color: #666;
            font-size: 14px;
            margin: 0;
          }
        }
        
        .avatar-upload {
          display: flex;
          align-items: center;
          gap: 16px;
          flex: 1;
          
          .avatar {
            background: #f5f5f5;
          }
          
          .upload-info {
            p {
              color: #666;
              font-size: 14px;
              margin: 0 0 8px 0;
            }
          }
        }
        
        .wechat-info {
          display: flex;
          align-items: center;
          gap: 8px;
          flex: 1;
          
          .wechat-icon {
            font-size: 18px;
          }
          
          span {
            flex: 1;
            color: #666;
            font-size: 14px;
          }
        }
      }
</style>